<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YOLOv10 Inference</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
        }

        input, select, button {
            margin-top: 5px;
            padding: 5px;
        }

        #uploadedImage {
            max-width: 100%;
            margin-top: 10px;
        }

        #resultImage {
            max-width: 100%;
            margin-top: 10px;
        }

        #resultVideo {
            max-width: 100%;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<form id="form">
    <div class="form-group">
        <label for="fileInput">Choose an image or video file:</label>
        <input type="file" id="fileInput" accept="image/*,video/*" onchange="uploadFile(this)">
        <div>
            <div style="display: inline-block" id="uploaded">
<!--                <img id="uploadedImage" src="" alt="Uploaded Image/Video" style="width: 600px">-->

            </div>
            <div id="show" style="display: inline-block">
            </div>
        </div>
    </div>
    <!--        <div>-->
    <!--            <div class="form-group" style="display: inline-block">-->
    <!--            <label for="modelSelect">选择您的模型:</label>-->
    <!--            <select id="modelSelect">-->
    <!--                <option value="yolov10n">yolov10n</option>-->
    <!--                <option value="yolov10s">yolov10s</option>-->
    <!--                <option value="yolov10m">yolov10m</option>-->
    <!--                <option value="yolov10b">yolov10b</option>-->
    <!--                <option value="yolov10l">yolov10l</option>-->
    <!--                <option value="yolov10x">yolov10x</option>-->
    <!--            </select>-->
    <!--        </div>-->

    <div class="form-group">
        <label for="image" style="display: inline-block">图片</label>
        <input type="radio" id="image" name="fileType" value="image">
        <label for="video" style="display: inline-block">视频</label>
        <input type="radio" id="video" name="fileType" value="video">
    </div>
    <div class="form-group" style="display: inline-block">
        <label for="imageSize">选择尺寸大小:</label>
        <input type="number" id="imageSize" min="320" max="1280" value="640">
    </div>
    <div class="form-group" style="display: inline-block">
        <label for="confThreshold">置信度阈值:</label>
        <input type="number" id="confThreshold" step="0.01" min="0" max="1" value="0.3">
    </div>
    </div>

    <div class="form-group">
        <button type="button" id="inferenceButton" style="padding: 10px 30px 10px 30px;background: cornflowerblue">检测
        </button>
    </div>
</form>
<!--    <div id="resultImage"></div>-->
<!--    <div id="resultVideo"></div>-->

<script>
    let fileUrl = '';

    function uploadFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var radios = document.getElementsByName('fileType');
                // for (var i = 0; i < radios.length; i++) {
                //     if (radios[i].checked) {
                //         console.log('选中的值是: ' + radios[i].value);
                //         break;
                //     }
                // }
                if (radios[0].checked){
                  // document.getElementById('uploadedImage').src = e.target.result;
                    document.getElementById('uploadedImage').innerHTML = `<img id="uploadedImage" src="${e.target.result}" style="width: 600px">`
                }else {
                    document.getElementById('uploadedImage').innerHTML = '<video controls><source src="' + e.target.result + '" type="video/mp4"></video>'
                }

            };
            reader.readAsDataURL(input.files[0]);

            var formData = new FormData();
            formData.append('file', input.files[0]);
            fetch('http://www.dongdongdabao.cn:9999/upload', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.file_path) {
                        fileUrl = data.file_path;
                    } else {
                        console.error('No file path returned from backend');
                    }
                })
                .catch(error => console.error('Error:', error));
        }
    }

    document.getElementById('inferenceButton').addEventListener('click', function () {
        // const modelId = document.getElementById('modelSelect').value;
        const imageSize = document.getElementById('imageSize').value;
        const confThreshold = document.getElementById('confThreshold').value;
        const inputType = document.getElementById('fileInput').files[0].type.startsWith('image') ? 'image' : 'video';
        // const inputType = document.getElementsByName('fileType').values()
        let data = {
            image: inputType === 'image' ? fileUrl : null,
            video: inputType === 'video' ? fileUrl : null,
            // model_id: modelId,
            image_size: parseInt(imageSize),
            conf_threshold: parseFloat(confThreshold)
        };

        fetch('http://www.dongdongdabao.cn:9999/yolo', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.json())
            .then(result => {
                console.log(result)
                if (inputType === 'image') {
                    const base64Image = result.image;
                    document.getElementById('show').innerHTML = `<img src="${base64Image}" alt="Result Image" style="width: 600px">`
                } else {
                    document.getElementById('show').innerHTML = '<video controls><source src="' + result + '" type="video/webm"></video>';
                }
            })
            .catch(error => console.error('Error:', error));
    });
</script>
</body>
</html>